<template>
  <section>
    <el-dialog
      title="地图"
      :visible.sync="showMap"
      width="70%"
      :append-to-body="true"
      @closed="closeMap"
      ref="Dialog"
      style="height: 600px; overflow: hidden;"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:1080px" @click="getClickInfo"
                 :scroll-wheel-zoom='true' v-loading='loadingMap'>
        <bm-view style="width: 100%; height:500px; flex: 1"></bm-view>
        <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search>
      </baidu-map>
    </el-dialog>

  </section>
</template>

<script>

export default {
  name: 'MapComponent',
  data() {
    return {
      // 地图相关
      loadingMap: true,
      BMap: '',
      map: '',
      geoc: '',
      showMap: false,
      addressKeyword: '',
      pointLngLat: '',
      center: {lng: 109.45744048529967, lat: 36.49771311230842},
      zoom: 13
    }
  },
  methods: {
    handler({BMap, map}) {
      this.mapOpen()
      this.BMap = BMap
      this.map = map
      this.loadingMap = true
      var geolocation = new BMap.Geolocation()
      this.geoc = new BMap.Geocoder() // 地址解析对象
      var $this = this
      // 调用百度地图api 中的获取当前位置接口
      geolocation.getCurrentPosition(function (r) {
        let myGeo = new BMap.Geocoder()
        myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function (result) {
          if (result) {
            $this.loadingMap = false
            $this.$set($this, 'pointLngLat', {lng: result.point.lng, lat: result.point.lat})
            map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放,默认关闭
            $this.addPoint({BMap, map})
          }
        })
      })
    },
    closeMap() {
      this.showMap = false
    },
// 添加点位
    addPoint({BMap, map}) {
      map.clearOverlays()
      var point = new BMap.Point(this.pointLngLat.lng, this.pointLngLat.lat)
      let zoom = map.getZoom()
      setTimeout(() => {
        map.centerAndZoom(point, zoom)
      }, 0)
      var marker = new BMap.Marker(point) // 创建标注
      map.addOverlay(marker) // 将标注添加到地图中
    },
// 点击地图
    getClickInfo(e) {
      this.center = {lng: e.point.lng, lat: e.point.lat}
      this.pointLngLat = {lng: e.point.lng, lat: e.point.lat}
      // 获取点位信息
      let _this = this
      this.geoc.getLocation(e.point, function (rs) {
        var addComp = rs.addressComponents
        _this.pointAddress = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber
        var pt = e.point;
        var marker = new BMap.Marker(pt); // 创建标注 e.target.clearOverlays();//e.target就是map
        e.target.addOverlay(marker);
        _this.$emit('getData',_this.pointAddress)
      })
    },
    mapOpen() {
      this.top = this.getScrollTop()
      if (this.top) {
        this.setScrollTop(0)
      }
    }
    ,
// 关闭地图后调用
    mapClose() {
      this.setScrollTop(this.top)
      this.top = 0
      this.showMap = false
    }
    ,
    getScrollTop() {
      let scrollTop = 0
      if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop
      } else if (document.body) {
        scrollTop = document.body.scrollTop
      }
      return scrollTop
    }
    ,
    setScrollTop(top) {
      if (!isNaN(top)) {
        if (document.documentElement && document.documentElement.scrollTop !== undefined) {
          document.documentElement.scrollTop = top
        } else if (document.body) {
          document.body.scrollTop = top
        }
      }
    }
  },
  //展示列表
  mounted() {

  }
}

</script>

<style scoped>
.bmap {
  width: 100%;
  height: 600px;
}

.searchinput {
  width: 300px;
  box-sizing: border-box;
  padding: 9px;
  border: 1px solid #dddee1;
  line-height: 20px;
  font-size: 16px;
  height: 38px;
  color: #333;
  position: relative;
  border-radius: 4px;
}

.el-dialog__headerbtn {
  position: absolute;
  top: 9px;
  right: 11px;
  padding: 0;
  background: 0 0;
  border: none;
  outline: 0;
  cursor: pointer;
  font-size: 16px;
}
</style>
